<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="cart">
        <mark>{{info}}</mark>
        <br>
        <input type="text" v-model="info">
        <hr>
        <!-- 固定内容放在span标签中，用{{}}表示变量 -->
        <label>名称:</label>
        <span>{{goods.name}}</span>
        <br>
        <label>价格：</label>
        <span>{{goods.price}}</span>
        <br>
        <!-- 数量可以修改，放在输入框中 -->
        <label>数量</label>
        <input type="text" v-model="goods.num">
        <p>总价：{{goods.price * goods.num}}</p>
        <!-- 判断，符合条件时才会展示 -->
        <!-- show 在条件不满足时隐藏元素，适用于经常切换的场景 -->
        <p v-show="ele">show:我不饿，也不困，我爱学习</p>
        <!-- if 在条件不满足时删除元素，适用于不经常切换，初始化加载比较快 -->
        <p v-if="ele">if:我不饿，也不困，我爱学习</p>
        <!-- 条件不成立时展示 -->
        <p v-else>弱小 无助 但能吃。。。</p>
    </div>
    <!-- 引入vue的代码 -->
    <script src="./vue.js"></script>
    <!-- 自己的js代码 -->
    <script>
        // Cart是组件名
        var Cart = {
            // 所有的数据都在data中，data是一个函数
            data() {
                return {
                    info: '快下课吧',
                    // 商品信息，包含名称单价和数量
                    goods: {
                        name: '棉签',
                        price: 3,
                        num: 3
                    },
                    ele: false
                }
            }
        }

        // 每次结束都要写Vue.createApp(组件名).mount(元素)
        Vue.createApp(Cart).mount('#cart')
    </script>
</body>
</html>